/* 
目标：案例小缺陷
  解决方案1：
    1. 让子组件 继承与 React.PureComponent。
    2. 父组件 list 数据深拷贝后，再进行 setState 操作。

  预期效果：
    1. 点击发布的时候，改变了 list 数组。
    2. list 数组被改变的时候，才触发 List 组件的 render 更新。

  解决方案2：
    通过生命周期函数自己封装实现。

*/
import React from 'react';

// List 子组件
class List extends React.Component {
  // shouldComponentUpdate 第一个参数，就是新的 props 数据
  shouldComponentUpdate(nextProps) {
    // 默认值 true，渲染子组件
    // 返回 false，反之则不渲染子组件

    // 判断条件分析：
    //    1. 旧的 list 数组和新的 list 数组，不一样的时候返回 true，才更新。
    //    2. 如果是一样的，就返回 false 不更新

    // 新的问题？
    //    如果比较 list 是否相等。
    //    简单数据类型，这个例子直接转成字符串比较即可。
    console.log('shouldComponentUpdate 是否更新？');
    // console.log('新的 props', nextProps.list);
    // console.log('旧的 props', this.props.list);

    // if (nextProps.list.toString() !== this.props.list.toString()) {
    //   return true;
    // } else {
    //   return false;
    // }
    return nextProps.list.toString() !== this.props.list.toString();
  }
  render() {
    console.log('List render 更新');
    return (
      <ol>
        {
          this.props.list.map((item, index) => <li onDoubleClick={() => this.props.aa(index)} key={item}>{item}</li>)
        }
      </ol>
    );
  }
}

class App extends React.Component {
  state = {
    inputValue: '菠萝',
    list: ['新闻1', '新闻2']
  };
  // 获取表单值
  handleChange = (e) => {
    // console.log(e.target.value);
    this.setState({ inputValue: e.target.value });
  };

  // 点击发布按钮
  handleClick = () => {
    // 利用解构赋值获取数据
    let { inputValue, list } = this.state;

    // 真正的深拷贝两种解决方案：
    //    1. 函数递归 - 上网找就好
    //    2. JSON.parse(JSON.stringify(xxx)) 
    let newList = JSON.parse(JSON.stringify(list));

    if (inputValue.trim() === '') {
      alert('请输入内容');
      return;
    }
    if (newList.indexOf(inputValue) === -1) {
      newList.unshift(inputValue);
      this.setState({ list: newList, inputValue: '' });
    }
  };

  itemDelete = (index) => {
    const { list } = this.state;
    list.splice(index, 1);
    this.setState({ list });
  };
  render() {
    // 利用解构赋值获取数据
    const { list, inputValue } = this.state;
    return (
      <div className="App">
        <input type="text" value={inputValue} onChange={this.handleChange} />
        <button onClick={this.handleClick}>发布</button>
        <List list={list} aa={this.itemDelete}></List>
      </div>
    );
  }
}


export default App;
